<template>
	<view id="app">
		<view class="head">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item class="swiper-item" v-for="(sw_item,sw_index) in swiper1" :key="sw_item.picture_id">
					<image class="swimage" :src="sw_item.picture_url" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="project-box">
				<view class="project">
					<view 
					:class="project_index == projectIndex?'project-item-select':'project-item' " 
					v-for="(project_item,project_index) in project" :key="project_item.project_id"
					@click="setProjectIndex(project_index)">
						{{project_item.project_name}}
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="notice-icon">
					<!-- <image src="../../static/notice.png" mode="widthFix"></image> -->
				</view>
				<view class="notice-text" :style="'animation:scroll '+move_time+'s linear infinite'">
					<view class="marquee">{{project_notice}}</view>
				</view>
			</view>
			<view class="people">
				已报名人数：{{enrollment}}
<!-- 				，剩余名额：{{remaining_personnel}} -->
			</view>
			<view class="desc">
				<mp-html :content="project_desc" />
			</view>
<!-- 			<swiper :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000" :circular="true">
				<swiper-item class="swiper-item" v-for="(sw_item,sw_index) in swiper2" :key="sw_item.picture_id">
					<image class="swimage" :src="sw_item.picture_url" mode="widthFix"></image>
				</swiper-item>
			</swiper> -->
				<view class="setPhone">
					<image src="../../static/phones.png" mode="widthFix" @click="playPhone"></image>
				</view>			
		</view>
		
		<view class="main">
			<view class="form">
				<view class="form-item">
					<view class="form-label">
						<text class="form-icon">*</text>联系电话
					</view>
					<view class="form-block">
						<input type="number" v-model="form.submit_phone" maxlength="11" placeholder="请输入联系电话" class="form-input">
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						<text class="form-icon">*</text>姓名
					</view>
					<view class="form-block">
						<input type="text" v-model="form.submit_name" placeholder="请输入姓名" class="form-input">
					</view>
				</view>
				<view class="form-item">
					<view class="form-label" style="font-size: 40rpx;padding: 20rpx 0;">
						报名费：<text style="color: #ff0000;">￥{{money}}</text>
					</view>
				</view>
				<view class="form-item">
					<view class="form-block">
						<button type="warn" :disabled="is_submit" @click="onSubmit">提交</button>
					</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	//import mpHtml from '../../compoments/mp-html/mp-html.vue'
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		// HBuilderX 2.5.5+ 可以通过 easycom 自动引入
		components: {
		  mpHtml
		},
		data() {
			return {
				
				is_submit:false,
				move_time:5,
				title: 'Hello',
				swiper1:'',
				swiper2:'',
				project:'',
				projectIndex:0,
				money:'',
				enrollment:'',
				remaining_personnel:'',
				project_notice:'',
				project_desc:'',
				form:{
					wx_openid:'',
					project_id:'',
					submit_name:'',
					submit_phone:'',
				}
			}
		},
		onLoad() {
			wx.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			this.getWxUser()
			this.getSwiper()
			this.getProject()
			this.getPhone()
		},
		methods: {
			//获取电话
			getPhone(){
				uni.request({
					url:this.$url + '/index/getPhone',
					method:'GET',
					success: (res) => {
						this.phone = res.data.data
					}
				})
			},
			//拨打电话
			playPhone(){
				uni.makePhoneCall({
					phoneNumber: this.phone //仅为示例
				});
			},
			getWxUser(){
				wx.login({
				  success: (res) =>{
				    if (res.code) {
				      //发起网络请求
				      uni.request({
				        url: this.$url + '/applet/index/setOpenid',
						method:'get',
				        data: {
				          code: res.code
				        },
						success:(new_res)=>{
							this.form.wx_openid = new_res.data.wxs_openid
						},
				      })
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})
			},
			onSubmit(){
				uni.request({
					url: this.$url + '/index/submit',
					method:'post',
					data:this.form,
					success:(res)=>{
						if(res.data.status == 200){
							this.form.submit_name = '',
							this.form.submit_phone = '',
							this.is_submit = true
							this.payment(res.data.pay_data,res.data.msg)
						}else{
							uni.showToast({
								title:res.data.msg || '提交异常',
								icon:'none'
							})
						}
					}
				})
			},
			//支付方法
			payment(paydata,msg) {
				if (!paydata) {
					uni.showToast({
						title: "未知支付数据",
						icon: "none"
					})
					return;
				}
				uni.requestPayment({
					provider: "wxpay", 
					timeStamp: paydata.timeStamp,
					nonceStr: paydata.nonceStr,
					package: paydata.package,
					signType: paydata.signType,
					paySign: paydata.paySign,
					success:(res)=> {
						//errMsg: "requestPayment:ok"
						console.log('success',res)
						if(res.errMsg === 'requestPayment:ok'){
							if(this.remaining_personnel >0){
								this.remaining_personnel = this.remaining_personnel - 1
								this.enrollment = this.enrollment + 1
							}else{
								this.remaining_personnel = 0
							}
							uni.showToast({
								title:msg,
								icon:'none'
							})
							this.is_submit = false
						}
					},
					fail:(res)=> {
						//errMsg: "requestPayment:fail cancel"
						console.log('fail',res)
						if(res.errMsg === 'requestPayment:fail cancel'){
							uni.showToast({
								title:'取消支付',
								icon:'none'
							})
						}else{
							uni.showToast({
								title:'支付失败',
								icon:'none'
							})	
						}
					}
				})
			},				
			getSwiper(){
				uni.request({
					url: this.$url + '/index/getSwiper',
					method:'get',
					success:(res)=>{
						this.swiper1 = res.data.data1
						this.swiper2 = res.data.data2
					}
				})
			},
			getProject(){
				uni.request({
					url: this.$url + '/index/getProject',
					method:'get',
					success:(res)=>{
						this.project = res.data.data
						this.move_time = res.data.move_time
						this.form.project_id = res.data.data[0].project_id
						this.money = res.data.data[0].project_money
						this.enrollment = res.data.data[0].b_num
						this.remaining_personnel = res.data.data[0].s_num
						this.project_notice = res.data.data[0].project_notice
						this.project_desc = res.data.data[0].project_desc
					}
				})
			},	
			setProjectIndex(index){
				this.projectIndex = index
				this.form.project_id = this.project[this.projectIndex].project_id
				this.money = this.project[this.projectIndex ].project_money
				this.enrollment = this.project[this.projectIndex ].b_num
				this.remaining_personnel = this.project[this.projectIndex ].s_num
				this.project_notice = this.project[this.projectIndex ].project_notice
				this.project_desc = this.project[this.projectIndex ].project_desc
			}		
		}
	}
</script>

<style lang="less">
#app{
	.head{
		swiper{
			height: 400rpx;
		}
		.swiper-item{
			width: 750rpx;
			height: 1300rpx;
			.swimage{
				width: 750rpx;
			}	
		}		
	}
	.project-box{
		width: 100%;
		padding: 0 4%;
		padding-top: 30rpx;
		box-sizing: border-box;
		.project{
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			// background-color: red;
			// margin: 0 auto;

			.project-item{
				border: 1rpx solid #c6c6c6;
				// margin-right: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
			.project-item-select{
				border: 1rpx solid #c6c6c6;
				background-color: #ff0000;
				color: #ffffff;
				padding: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;	
			}
		}
	}
	.notice{
		display: flex;
		align-items: center;
		background-color: #FF9900;
		padding: 20rpx 4%;
		.notice-icon{
			image{
				width: 60rpx;
			}
		}
		.notice-text{
			color: #ffffff;
			flex: 1;
			 // border: 1px solid green; 
			.marquee {
			  white-space: nowrap;  
			  overflow: hidden;  
			  width: auto;  
			  height: 20px;  
			 // border: 1px solid #ccc; 
			  
			}  
			@keyframes scroll {  
			  0% {  
			    transform: translateX(100%); 
				// transform: translateX(0%);  
			  }  
			  100% {  
			    transform: translateX(-100%); 
				 //transform: translateX(90%);  
			  }  
			}
		}
	}
	.people{
		text-align: center;
		// font-weight: bold;
		font-size: 40rpx;
		padding-top: 20rpx;
	}
	.desc{
		text-align: left;
		padding: 0 4%;
		padding-top: 50rpx;
		padding-bottom: 30rpx;
	}
	.setPhone{
		// position: absolute;
		// bottom: 0;
		// right: 20rpx;
		// z-index: 999;
		width: 750rpx;
		display: flex;
		justify-content: flex-end;
		image{
			display: block;
			width: 100rpx;
			padding-right: 50rpx;
			//animation: donghua 2s  infinite;
			//animation: donghua 2s  ease both; 
			//animation: donghua1 0.82s cubic-bezier(.36,.07,.19,.97) both;
			//animation: donghua1 4s ease-in-out infinite;
			animation: donghua2 4s cubic-bezier(.36,.07,.19,.97) infinite;
		}
	}
	@keyframes donghua1 {
		10%, 90% {
		transform: translate3d(-2px, 0, 0);
		}
		20%, 80% {
		transform: translate3d(4px, 0, 0);
		}
		30%, 50%, 70% {
		transform: translate3d(-8px, 0, 0);
		}
		40%, 60% {
		transform: translate3d(8px, 0, 0);
		}		
	}
	@keyframes donghua2{
			0%,100%{transform: translateX(0);}
			10%,30%,50%,70%,90%{transform: translateX(-5px);}
			20%,40%,60%,80%{transform: translateX(5px);} 
	}
      @keyframes anim {
         0% {
            box-shadow: 0 1px 0 4px #ffffff;
         }
         10%{
            box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
         }
         25% {
            box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
         }
         50% {
            box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1),  0 2px 5px 23px rgba(248, 248, 255, 1);
         }
      }	
      @keyframes vibration {
         0% { transform: rotate(0deg); }
         25% { transform: rotate(20deg); }
         50% { transform: rotate(0deg); }
         75% { transform: rotate(-15deg); }
         100% { transform: rotate(0deg); }
      }	
@form-div-padding:20rpx 5%;	
@form-border:1rpx solid #c6c6c6;
@form-input-padding:15rpx 20rpx;
@form-border-radius:10rpx;
page{
	background-color: #EDEDED;
}
.view-form-input(){
	border-radius: @form-border-radius;
	border:@form-border;
	padding:@form-input-padding;
}
.main{
	width: 750rpx;
	padding:@form-div-padding;
	box-sizing: border-box;
	.form{
		border-radius: @form-border-radius;
		background-color: #ffffff;
		width: 100%;
		// padding: @form-div-padding;
		box-sizing: border-box;
		.form-item{
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			.form-label{
				padding-right:15rpx;
				.form-icon{
					color: #ff0000;
				}
			}
			.form-block{
				flex: 1;
				.form-input{
					.view-form-input();
				}
				.form-textare{
					.view-form-input();
					/**解决溢出div问题*/
					box-sizing: border-box;
					width: 100%;
				}
				.form-gander-radio{
					label{
						&:nth-of-type(2){
							margin-left: 50rpx;
						}
					}
				}
				.form-slider{
					width: 90%;
				}
			}
		}
		.form-item-verify{
			display: flex;
			align-items: center;
			justify-content: ;
			margin-bottom: 15rpx;
			.form-label-verify{
				padding-right: 10rpx;
				.form-icon{
					color: #ff0000;
				}
			}
			.form-block-verify{
				flex: 2.5;
				.form-input{
					.view-form-input();
				}
				
			}
			.form-btn{
				// padding: 9rpx;
				flex: 1;
			}
		}
		
	}	
}	
}
</style>
